<template>
  <div class="floorGuide">
    <el-carousel arrow="never" height="965px" indicator-position="none" :interval="changeAllFloor"  @change="changeCarousel">
      <el-carousel-item v-for="(firstItem,firstKey) in floorList" :key="firstKey">
        <div class="floorGuideList">
          <div class="floorGuideEveryWrap" v-for="(secondItem,secondKey) in firstItem" :key="secondKey">
            <div class="floorGuideEveryTit">{{ secondItem.name }}</div>
            <div class="floorGuideEveryItem">
              <div class="floorShowBg">
                <div class="floorShowBgItem" v-for="s in 8"
                     :style="{background:s%2?'#09589D':'#084C8B'}">
                </div>
              </div>
              <div class="swiperSonGuide">
                <el-carousel arrow="never"  indicator-position="none" v-if="showList[firstKey].flag" :interval="changeEveryFloorInfo" direction="vertical" height="352px">
                  <el-carousel-item v-for="(thirdItem,thirdIndex) in secondItem.finalList" :key="thirdIndex">
                    <div class="swiper-item-every" v-for="(fourth,fourthIndex) in thirdItem" :key="fourthIndex">
                      <span class="round">{{ fourth.name }}</span>&nbsp;
                      <template v-if="fourth.name.length===2">
                        <marquee v-if="fourth.text.length>18" class="inner-word238" behavior="scroll" scrolldelay="300">&nbsp;{{fourth.text}}</marquee>
                        <span v-else class="inner-word238">{{ fourth.text }}</span>
                      </template>
                      <template v-else-if="fourth.name.length===4">
                        <marquee v-if="fourth.text.length>16" class="inner-word238" behavior="scroll" scrolldelay="300">&nbsp;{{fourth.text}}</marquee>
                        <span v-else class="inner-word238">{{ fourth.text }}</span>
                      </template>
                      <template v-if="fourth.name.length===9">
                        <marquee v-if="fourth.text.length>11" class="inner-word195" behavior="scroll" scrolldelay="300">&nbsp;{{fourth.text}}</marquee>
                        <span v-else class="inner-word195">{{ fourth.text }}</span>
                      </template>
                    </div>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>


  </div>
</template>
<script>
import mixFloor from "@/components/floor/mixFloor";

export default {
  mixins: [mixFloor],
  created() {
    this.getFloorList(8);
  },
}
</script>
<style lang="scss" scoped>
.swiperSonGuide {
  height: 352px;
  position: relative;
  overflow: hidden;
  top: 0;
  z-index: 2;
}

.swiper-item-every {
  font-size: 14px;
  height: 36px;
  line-height: 36px;
  overflow: hidden;
  font-weight: bold;
  display: flex;
  margin-bottom: 8px;
}

.round {
  min-width: 48px;
  margin-right: 5px;
  line-height: 20px;
  height: 20px;
  position: relative;
  top: 10px;
  left: 5px;
  background: #042346;
  text-indent: 0;
  text-align: center !important;
  border-radius: 10px;
  padding-left: 5px;
  padding-right: 5px;
}

.inner-word238 {
  width: 238px;
}
.inner-word195 {
  width: 195px;
}
.floorGuide {
  width: 1330px;
  height: 985px;
  position: absolute;
  left: 566px;
  overflow: hidden;
  top: 66px;
  padding-top: 18px;
  padding-left: 20px;

  .floorGuideTitle {
    top: 45px;
    left: 52px;
    width: 330px;
    height: 44px;
    text-indent: 10px;
    line-height: 44px;
    font-weight: bold;
    font-size: 26px;
  }

  .floorGuideList {
    width: 1304px;
    margin: 0 auto;
    position: relative;
    top: 100px;
    height: 916px;

    .floorGuideEveryWrap {
      float: left;
      width: 310px;
      margin-right: 16px;
      margin-bottom: 30px;

      .floorGuideEveryTit {
        width: 310px;
        height: 40px;
        padding-left: 30px;
        background: url("./flooNameBigBg.png") no-repeat;
        font-size: 30px;
        line-height: 40px;
        text-indent: 24px;
        font-weight: bold;
      }

      .floorGuideEveryItem {
        width: 100%;
        height: 360px;
        background: #003A6D;
        font-size: 18px;
        margin-top: 5px;
        padding: 10px;
        border-radius: 8px;
        position: relative;

        .floorShowBg {
          width: 290px;
          height: 240px;
          position: absolute;
          left: 10px;
          top: 10px;
          z-index: 1;

          .floorShowBgItem {
            height: 36px;
            width: 100%;
            margin-bottom: 8px;
          }
        }
      }
    }
  }
}

</style>